<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import axios from "axios";
const apiUrl = "https://api.mebooapp.com/api/app/device/ip";
const headers = {
  "Content-Type": "application/json",
  basicParams: JSON.stringify({
    timestamp: Date.now(),
    channel: "1",
    appsFlyerUID: "",
    appCode: "sparksy_ios",
    applicationID: "com.meboo.ios",
    appVersion: "1",
    token: "",
    appVersionName: "1.2.0",
    appSource: "2",
    from: "1",
  }),
};
let retries = 0;
const isRedirect = ref(false);
const fetchData = async () => {
  try {
    const response = await axios.post(
      apiUrl,
      JSON.stringify({
        type: 1,
      }),
      { headers }
    );
    if (response && response.data.code == 0) {
      console.log("succ");
      isRedirect.value = true;
    } else {
      retries++;
      if (retries >= 3) {
        isRedirect.value = true;
      } else {
        console.log("fail");
        await fetchData();
      }
    }
  } catch (error) {}
};

const redirectToLink = async () => {
  const textToCopy = "Welcome To Meboo!";
  try {
    await navigator.clipboard.writeText(textToCopy);
    console.log("文本已成功写入剪贴板");
    if (isRedirect.value) {
      window.location.href = "https://mbweb.onelink.me/pv0e/lj4bf362";
    }
  } catch (err) {
    console.error("无法写入剪切板: ", err);
  }
};
onMounted(() => {
  fetchData();
});
</script>
<!-- ./assets/logo.svg -->

<template>
  <div class="main" id="myButton">
    <!-- <img class="downbg" src="./downbgios.jpg" /> -->
    <img class="logo" src="./assets/logo.png" alt="logo" />
    <div class="meboo">Meboo</div>
    <img class="arrow" src="./assets/arrowios.png" />
    <img class="dialogue" src="./assets/dialogue.png" />
    <img class="devil" src="./assets/devil.png" />
    <div style="display: flex; position: relative">
      <img class="phone" src="./assets/phoneios.png" />
      <img
        class="down"
        src="./assets/down.png"
        @click="redirectToLink"
      />

      <div style="position: relative; width: 46vw">
        <img class="video" src="./assets/video.png" />
        <p class="inst">24H</p>
        <p class="inst resp">1on1</p>
        <p class="limit">No limited</p>
      </div>
    </div>
    <div style="height: 68px"></div>

    <div style="position: relative; height: 123px; margin: 0 18px">
      <img class="face" src="./assets/face.png" />
      <p class="hey">Real and Safe</p>
    </div>
    <div style="height: 75px; text-align: center">
      <img class="with" src="./assets/withios.png" />
    </div>
  </div>
</template>

<style scoped>
@font-face {
  font-family: "InterBold";
  src: url("/font/Inter-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.main {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: url("./assets/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 100vh;
}

.main {
  width: 100%;
}
.down {
  width: 100%;
  position: absolute;
  bottom: -46px;
  z-index: 999;
}

.logo {
  margin-left: 18px;
  width: 16vw;
  margin-top: 36px;
}

.meboo {
  color: #b92176;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  font-family: InterBold;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  margin-left: 20px;
  margin-top: -8px;
  line-height: normal;
}
.arrow {
  width: 74px;
  position: absolute;
  top: 50px;
  left: 95px;
}
.dialogue {
  position: absolute;
  width: 35vw;
  top: 65px;
  right: 80px;
}
.devil {
  position: absolute;
  width: 24vw;
  top: 113px;
  right: 5px;
}
.phone {
  width: 53vw;
  margin-top: 33px;
  margin-left: 4px;
}
.video {
  width: 44vw;
  margin-top: 91px;
  margin-left: 2px;
}

.inst {
  color: #231e22;
  font-family: InterBold;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.resp {
  color: #b92176;
}
.limit {
  width: 45vw;
  position: absolute;
  border-radius: 20px;
  background: #b92176;
  height: 57px;
  background: #fff;
  font-family: InterBold;
  text-align: center;
  font-size: 28px;
  padding: 5px 0;
}
.face {
  width: 26vw;
  position: absolute;
  top: 9px;
  z-index: 1;
}
.hey {
  width: 70vw;
  border-radius: 24px;
  background: #fff;
  height: 85px;
  text-align: center;
  font-family: InterBold;
  font-size: 32px;
  line-height: normal;
  padding: 14px;
  position: absolute;
  right: 6px;
  padding: 22px 18px;
}
.with {
  width: 66vw;
}
</style>
